<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>鼠标移入文字加载动画</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <style>
      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }

      .container {
        width: 1200px;
        /* 要么设置高度，如果没高度，需要清除浮动 */
        /* height:370px; */
        margin: 101px auto 0px;
        /* background-color: skyblue; */
      }

      .container .item {
        width: 280px;
        height: 370px;
        background-color: pink;
        margin: 0px 10px;
        float: left;
        position: relative;
        /* 处理细节 */
        overflow: hidden;
      }

      .container .item .item-mask {
        background-color: rgba(0, 0, 0, 0);
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        transition: background-color, ease 0.5s;
      }

      .container .item:hover .item-mask {
        background-color: rgba(0, 0, 0, 0.5);
      }

      .item .item-title {
        position: absolute;
        left: 20px;
        top: -50px;
        font-size: 20px;
        color: #fff;
        transition: top ease 0.5s;
      }

      .item .item-singer {
        /* background-color: red; */
        position: absolute;
        left: 0;
        top: 290px;
        font-size: 14px;
        color: #fff;
        /* padding-left: 20px; */
        transform: translateX(-100%);
        transition: transform ease 0.5s;
      }

      .item .item-info {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 370px;
        font-size: 14px;
        color: #fff;
        /* padding-left: 20px; */
        transition: top ease 0.5s;
      }

      .item:hover .item-title {
        top: 250px;
      }

      .item:hover .item-singer {
        /* left: 20px; */
        transform: translateX(25px);
      }

      .item:hover .item-info {
        top: 320px;
      }
    </style>
  </head>
  <body>
    <div class="container clearfix">
      <div class="item">
        <img src="images/hover1.jpg" alt="" width="280" />
        <div class="item-mask"></div>
        <div class="item-title">《听闻远方有你》</div>
        <div class="item-singer">演唱：刘艺雯</div>
        <div class="item-info">我吹过你吹过的风，这算不算相拥。我走过你走过的路，这算不算相逢...</div>
      </div>
      <div class="item">
        <img src="images/hover2.jpg" alt="" width="280" />
        <div class="item-mask"></div>
        <div class="item-title">《如果你能把我灌醉》</div>
        <div class="item-singer">演唱：任夏</div>
        <div class="item-info">如果你能把我灌醉，你就知道我还爱着谁。如果你也伤痕累累...</div>
      </div>
      <div class="item">
        <img src="images/hover3.jpg" alt="" width="280" />
        <div class="item-mask"></div>
        <div class="item-title">《秒针》</div>
        <div class="item-singer">演唱：阿梨粤</div>
        <div class="item-info">雨夜深深，沉默的秒针。冥冥中给我轻轻感应这共振...</div>
      </div>
      <div class="item">
        <img src="images/hover4.jpg" alt="" width="280" />
        <div class="item-mask"></div>
        <div class="item-title">《留什么给你》</div>
        <div class="item-singer">演唱：孙楠</div>
        <div class="item-info">那天离开你留下几个字给你...</div>
      </div>
    </div>
  </body>
</html>
